<template>
    <view class="gjl-view">
        <view class="main">
            <view class="main-center">
                <view class="title">
                    拇指合伙人目前采用会员邀请制，满足一下条件可以加入:
                </view>
                <view class="small-title">
                    1.需要成为拇指会员，且至少有一个已经激活使用的会员
                </view>
                <view class="text">
                    我们相信只有先体验过拇指会员服务的用户才能更好的服务更多的用户，才能成为一个优秀的合伙人
                </view>
                <view class="small-title">
                    2.为了保证您的账户安全，请提供真实的信息认证
                </view>
            </view>
            <view class="btn-box">
                <view class="btn" @click="toJoin">
                    我已了解，立即加入
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import showModel from '@/components/show-model/show-model.vue'
    export default {
        components: {
            showModel
        },
        onShow() {
            this.$refs.model.closeModel()
        },
        methods: {
            toJoin() {
                this.$routerTo({
                    path: '/pagesMine/copartner/form'
                })
            },
            cancle() {
                this.$refs.model.closeModel()
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        .model-main {
            box-sizing: border-box;
            padding: 0 20rpx;
            width: 560rpx;
            height: 481rpx;
            background-color: #fff;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8rpx;
            text-align: center;

            .tip-img {
                margin: -72rpx auto 0;
                height: 180rpx;
                width: 180rpx;

                image {
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .tip-title {
                margin-top: 40rpx;
                font-size: 36rpx;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
            }

            .tip-text {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            .btn-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 85rpx;

                .cancle {
                    padding: 23rpx 95rpx;
                    border: 1px solid rgba(43, 168, 252, 1);
                    font-size: 30rpx;
                    font-weight: 400;
                    color: rgba(43, 168, 252, 1);
                }

                .beVip {
                    padding: 23rpx 65rpx;
                    background: rgba(43, 168, 252, 1);
                    font-size: 30rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }

        .main {
            margin: 50rpx 30rpx 0;

            .main-center {
                .title {
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #333333;
                }

                .small-title {
                    margin-top: 50rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #333333;
                }

                .text {
                    margin-top: 50rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #999999;
                }
            }

            .btn-box {
                margin-top: 116rpx;
                background: rgba(43, 168, 252, 1);
                border-radius: 8rpx;
                text-align: center;
                padding: 24rpx 0;

                .btn {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
</style>
